<!--
 * @Author: cjy
 * @Date: 2020-09-16 14:51:11
 * @LastEditors: Please set LastEditors
 * @Descripttion: 
 * @LastEditTime: 2021-10-20 16:09:11
 * @FilePath: \vue-openlayers\src\views\superMapTile\SuperMapTile.vue
-->
<template>
  <div class="vm">
    <h2 class="h-title">地图事件的初步使用</h2>
    <div id="map" class="map-x"></div>
    <div class="explain">
        <el-button type="primary" @click="setMapSise">改变map的sise</el-button>
        <el-button type="success" @click="recoverSize">恢复map原始size</el-button>
    </div>
  </div>
</template>

<script>
import 'ol/ol.css'
import { Map, View } from 'ol'
import Tile from 'ol/layer/Tile'
import OSM from 'ol/source/OSM'
import XYZ from 'ol/source/XYZ'
import { Logo, TileSuperMapRest } from '@supermap/iclient-ol';

export default {
  name: 'FirstMap',
  data () {
    return {
      map: null,
      label: "默认名称001"

    }
  },
  methods: {
    initMap () {
      // 地图实例
      this.map = new Map({
        target: "map", // 对应页面里 id 为 map 的元素
        layers: [ // 图层
          // new Tile({
          //     source: new TileSuperMapRest({
          //         url: "https://iserver.supermap.io/iserver/services/map-world/rest/maps/World",
          //         wrapX: true
          //     }),
          //     projection: 'EPSG:4326'
          // })
           new Tile({
              source: new OSM(),
          })
        ],
        view: new View({ // 地图视图
          projection: "EPSG:4326", // 坐标系，有EPSG:4326和EPSG:3857
          center: [110.064839, 32.548857], // 深圳坐标
          // minZoom:10, // 地图缩放最小级别
          zoom: 5 // 地图缩放级别（打开页面时默认级别）
        })
      })

      // 事件句柄，用于添加事件或取消事件
      let hanler = function (evt) {
        // let pixel = this.map.getEventPixel(evt.originalEvent);//获取指针所在的像素点
        console.log(evt.pixel);
        // console.log(pixel);
        // let feature;
        // if (map.hasFeatureAtPixel(pixel))//判断像素点的位置是否有矢量要素
        // {
        //     //获取位于像素点位置的矢量要素
        //     feature = this.map.forEachFeatureAtPixel(pixel, function (feature, layer) {
        //         return feature;
        //     });
        //     console.log(feature.get("name"))//获取矢量要素的某个属性值并打印
        // }
      }

      //
      this.map.on('singleclick', hanler);

      setTimeout(() => {
        this.map.un("singleclick",hanler)
      }, 3000);

      // 可监控属性的变化触发事件：用于属性变化出发的事件处理
      console.log(this.map.getSize(), "====mapSize=====")
      this.map.on("change:size", (evt)=>{
        console.log(evt,  "======================map:sise事件触发=====================")
      })

      //测试回调函数中的this指向
      // this.map.on('moveend', this.moveend)
      this.map.on('moveend', this.moveend, this.map)
    },
    setMapSise(){
      this.map.setSize([800, 600])
    },
    recoverSize(){
      this.map.setSize([1596, 800])
    },
    //
    moveend(){
      console.log(this.label);
    }

    
  },
  mounted () {
    this.initMap();
  }
}
</script>

<style lang="scss" scoped>
  
</style>